<template>
  <div class="changepasswd-wrap">
    <div v-title style="display: none">忘记密码</div>
      <div class="changepasswd-content-1">
        <div class="input-wrap">
          <div class="input-content">
            <input class="inputs" placeholder="手机号" type="text" v-model="phone"/>
            <span v-show="sent" class="span-sent">已发送(<span>{{ time }}</span>)</span>
            <span v-show="get" class="span-verify" @click="getVerify">获取验证码</span>
          </div>
          <div class="input-content">
            <input class="inputs" placeholder="手机验证码" type="number" v-model="verify"/>
            <span class="span-tick" v-show="vertick"></span>
          </div>
        </div>
      </div>

      <div class="changepasswd-content-2">
        <div class="input-wrap">
          <div class="input-content">
           <input type="password" class="inputs" placeholder="请输入新的密码 (6~18位)" v-model="passwd"/>
           <span class="span-tick" v-show="passtick"></span>
          </div>
        </div>
      </div>
      <div class="changepasswd-confirm">
        <span class="submit" v-if="update" @click="updatepasswd">确认修改</span>
        <span class="unsubmit" v-else>请先完善信息</span>
      </div>

  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
    },
    data() {
      return {
        sent: '',
        get: '',
        phone: '',
        time: '60',
        verifycode: '',
        verify: '',
        passwd: '',
        vertick: '',
        passtick: '',
        update: ''
      };
    },
    watch: {
      passwd: function(newdata, olddata) {
        let reg = /^[a-zA-Z0-9]{6,18}$/;
        if (reg.test(this.passwd)) {
          this.passtick = 'true';
          this.check();
        } else {
          this.passtick = '';
          this.check();
        }
      },
      phone: function(newdata, olddata) {
        let reg = /^1[0-9]{10}$/;
        if (reg.test(this.phone)) {
          this.get = 'true';
          this.sent = '';
        } else {
          this.get = '';
          this.sent = '';
        }
      },
      verify: function(newdata, olddata) {
        let verifycode = this.verifycode.toString();
        if (this.verify !== '') {
          if (this.verify === verifycode) {
            this.vertick = 'true';
            this.check();
          } else {
            this.vertick = '';
            this.check();
          }
        } else {
          this.vertick = '';
          this.check();
        }
      }
    },
    methods: {
      getVerify() {
        this.countdown();
        this.$http.post('api/opera/getverify/', {phone: this.phone}).then(response => {
          response = response.body;
          this.verifycode = response.data[0].str;
          console.log(this.verifycode);
        });
      },
      countdown() {
        if ((this.time) > 0) {
          this.time--;
          this.sent = 'true';
          this.get = '';
          setTimeout(() => {
            this.countdown();
          }, 1000);
        } else {
          this.get = 'true';
          this.sent = '';
          this.time = 60;
        }
      },
      check() {
        if ((this.vertick === 'true') && (this.passtick === 'true')) {
          this.update = 'true';
        } else {
          this.update = '';
        }
      },
      updatepasswd() {
        this.$http.post('api/login/updatepassword/', {mobile: this.phone, password: this.passwd, verify: this.verify}).then(response => {
          let msg = response.body.errno;
          if (msg === 1) {
            var msgs = response.body.message;
            window.alert(msgs);
            this.$router.push({path: '/login/?redireat_url=' + '/'});
          }
          if (msg === 0) {
            var errmsg = response.body.message.mobile;
            window.alert(errmsg);
            this.$router.go(0);
          }
        });
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border
     背景 灰白 $bg
     主题 红 $$theme
     辅助 蓝 $assist */ 
  .changepasswd-wrap
    .changepasswd-content-1
      margin-top 55px
    .changepasswd-content-2
      margin-top 30px
    .input-wrap
      padding-left 20px
      padding-right 20px
      color rgb(207,207,206)
      .input-content
        position relative
        height 40px
        width 100%
        background-color $bg-white
        border-radius 5px
        margin-top 10px
      .inputs
        padding-left: 18px;
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
        line-height: 40px;
        border-radius: 5px;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
      .inputss
        margin-left 18px
        margin-top 11px
        font-size 16px
        width 180px
        -webkit-tap-highlight-color rgba(0,0,0,0)
      .span-verify
        height: 30px;
        position: absolute;
        right: 8px;
        top: 50%;
        margin-top: -15px;
        background-color: #d32f2f;
        color: #fff;
        font-size: 15px;
        line-height: 30px;
        padding: 0 8px;
        border-radius: 5px;
      .span-sent
        height 30px
        border-radius: 5px;
        position: absolute;
        background-color rgb(207,207,207)
        color $bg-white
        right: 8px;
        top: 50%;
        margin-top: -15px;
        font-size 15px
        line-height 30px
        padding 0 8px
      .span-tick
        display inline-block
        position: absolute;
        right 8px
        circle-icon-1px($theme,14px)
        top 12px
        bg-image('cm')
    .changepasswd-confirm
      padding-left 20px
      padding-right 20px
      margin-top 18px
      .submit
        display inline-block
        height 40px
        width 100%
        line-height 38px
        border-radius 5px
        font-size 16px
        text-align center
        background-color $theme
        color rgb(255,255,255)
      .unsubmit
        display inline-block
        height 40px
        width 100%
        line-height 38px
        border-radius 5px
        font-size 16px
        text-align center
        background-color $pre-fn
        color rgb(255,255,255)
</style>